// 引入sme-router
import SMERouter from 'sme-router'

import axios from 'axios'

// 引入ejs模板
import login from 'v/login'
import home from 'v/index'
import adminList from 'v/adminList'
import advList from 'v/advList'
// console.log(login) //login是一个函数
// console.log(login({ name: 'zs', age: 18 })) // login的返回值就是login.ejs中html字符串

// 创建路由对象
// sme-router默认使用hash模式
// 第二个参数传入html5,则切换为history模式
// history和hash模式的区别:
// history修改的是路径,看的也是路径
// hash修改的是哈希值,看的也是hash值
const router = new SMERouter('root', 'html5')

// 添加router到全局
window.router = router

// 配置前端路由的代码
router.route('/login', (req, res) => {
  //当浏览器地址栏的path变成了/login的时候,这个函数就会调用
  res.render(login())
})
router.route('/home', (req, res, next) => {
  //当浏览器地址栏的path变成了/login的时候,这个函数就会调用
  // res.render(home())
  //改成下面的写法:
  // 作用: 再渲染二级路由的时候,要保证一级路由也可以正常渲染
  next(
    home({
      // 将渲染二级路由视图的标签传入到首页的模板中
      subRoute: res.subRoute(), // subRoute:'<div id="__sub-route-view"></div>'

      url: req.url, //req.url返回当前浏览器地址栏的路径. 和location.pathname一样
    })
  )
})

// 1. 嵌套路由的路径要求: 路径必须以父级路由的路径开头
// 2. 去webpack.prod.js中 配置publicPath: '/' 解决获取不到build.js的问题
// 3. 去home的路由规则中中把res.render(home()) 改成 next(home())
// 4. next(home()) 改成  next(home({subRoute: res.subRoute()}))
// 5. 去index.ejs 中 添加代码 <%= data.subRoute %>
router.route('/home/admin', async (req, res) => {
  // 只要用户打开管理员页面,就发送请求获取数据
  // 注意: 如果要使用代理给服务器发送请求,写路径一般只写相对路径.这样浏览器会自动将当前页面的协议,域名端口号拼接在我们的路径前面,就可以直接把请求发送给开发服务器
  const result = await axios.get('/api/getAdmin')
  console.log(result)
  res.render(adminList())
})
router.route('/home/adv', (req, res) => {
  res.render(advList())
})
// 当路径为没有定义的路由路径时,则重定向回到登录页面
router.route('*', (req, res) => {
  res.redirect('/login')
})
